import React from "react";
import { NavBar, Icon ,TabBar ,List,ActionSheet, Button, } from 'antd-mobile';
import '../style/account.css'
import Public_TAB from  '../componets/Public_TAB'
const Item = List.Item;
const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
let wrapProps;
if (isIPhone) {
  wrapProps = {
    onTouchStart: e => e.preventDefault(),
  };
}
class Account extends React.Component {
  constructor() {
    super();
    this.state = {
      clicked: 'none',
      clicked1: 'none',
      status:[],
    };
  }
componentDidMount(){
  //获取用户登录状态
  fetch("http://106.12.79.128:666/login/status")
  .then(data =>data.json())
  .then(res =>{
    this.state.status = res
    console.log(this.state.status);
  })
}
  dataList = [
    { url: 'OpHiXAcYzmPQHcdlLFrc', title: '发送给朋友' },
    { url: 'wvEzCMiDZjthhAOcwTOu', title: '新浪微博' },
    { url: 'cTTayShKtEIdQVEMuiWt', title: '生活圈' },
    { url: 'umnHwvEgSyQtXlZjNJTt', title: '微信好友' },
    { url: 'SxpunpETIwdxNjcJamwB', title: 'QQ' },
  ].map(obj => ({
    icon: <img src={`https://gw.alipayobjects.com/zos/rmsportal/${obj.url}.png`} alt={obj.title} style={{ width: 36 }} />,
    title: obj.title,
  }));

  toLogin(){
    this.props.history.push("/login")
  }
  showVersion(){
    this.props.history.push("/version")
  }
  showShareActionSheet = () => {
    ActionSheet.showShareActionSheetWithOptions({
      options: this.dataList,
      // title: 'title',
      message: '',
    },
    (buttonIndex) => {
      this.setState({ clicked1: buttonIndex > -1 ? this.dataList[buttonIndex].title : 'cancel' });
    });
  }
  render() {
    return (
    <div>
      <NavBar
        mode="light"
        icon={<div style={{
                width: '22px',
                height: '22px',
                background: 'url('+require('../img/code.png')+') center center /  23px 23px no-repeat' }}
              />
              }
        onLeftClick={() => console.log('onLeftClick')}
        rightContent={[
          <Icon  style={{  
            width: '22px',
            height: '22px',
            background: 'url('+require('../img/正在播放.png')+') center center /  23px 23px no-repeat' }} />,
        ]}
      >账号
      </NavBar>

      <div className="txt-center" >登录网易云音乐</div>
      <br/>
      <div className="txt-center">
      手机电脑多段同步，尽享海量高品质音乐
      </div><br/>
      <div className="login" onClick= {this.toLogin.bind(this)}>立即登录</div>
      <br/>
      <div className="ktvip">
        开通黑胶vip|超值礼券免费抽
      </div>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#33A3F4"
          barTintColor="white"
          tabBarPosition="top"
        >

            <TabBar.Item
              title="消息"
              key="msg"
              icon={<div style={{
                width: '22px',
                height: '22px',
                background: 'url('+require('../img/消息.png')+') center center /  23px 23px no-repeat' }}
              />
              }
              onPress={() => {
                this.setState({
                  selectedTab: 'blueTab',
                });
                this.props.history.push("/mymsg")
              }}
            
            >
          </TabBar.Item>

        <TabBar.Item
          icon={
            <div style={{
              width: '22px',
              height: '22px',
              background: 'url('+require('../img/商城.png')+') center center /  23px 23px no-repeat' }}
            />
          }
          title="商城"
          key="mall"
          onPress={() => {
            this.setState({
              // selectedTab: 'redTab',
            });
          }}
          >
          </TabBar.Item>

          <TabBar.Item
            icon={
              <div style={{
                width: '22px',
                height: '22px',
                background: 'url('+require('../img/演出日历.png')+') center center /  23px 23px no-repeat' }}
              />
            }
            title="演出"
            key="show"
            onPress={() => {
              this.setState({
                // selectedTab: 'greenTab',
              });
            }}
          >
          </TabBar.Item>

          <TabBar.Item
            icon={
              <div style={{
                width: '22px',
                height: '22px',
                background: 'url('+require('../img/衣服换肤.png')+') center center /  23px 23px no-repeat' }}
              />
            }
            title="演出"
            key="show"
            onPress={() => {
              this.setState({
                // selectedTab: 'greenTab',
              });
            }}
          >
          </TabBar.Item>

      </TabBar>


      <List renderHeader={() => ''}>
        <Item
          arrow="horizontal"
          onClick={() => {}}
        >
        <span style={{ width: '23px', height: '23px', display: 'inline-block', background: 'url('+require('../img/铃声.png')+') center center /  23px 23px no-repeat'}}>
        </span>
        口袋铃声
        </Item>
        <Item
          onClick={() => {}}
          arrow="horizontal"
        >
        <span style={{ width: '23px', height: '23px', display: 'inline-block', background: 'url('+require('../img/订单.png')+') center center /  23px 23px no-repeat'}}>
        </span>
          我的订单
        </Item>
      </List>

      <List renderHeader={() => ''}>
        <Item
          
          arrow="horizontal"
          onClick={() => {}}
        >
        <span style={{ width: '23px', height: '23px', display: 'inline-block', background: 'url('+require('../img/设置.png')+') center center /  23px 23px no-repeat'}}>  </span>
        设置
        </Item>
        <Item
          
          onClick={() => {}}
          arrow="horizontal"
        >
        <span style={{ width: '23px', height: '23px', display: 'inline-block', background: 'url('+require('../img/夜间模式.png')+') center center /  23px 23px no-repeat'}}>  </span>
          夜间模式
        </Item> 
        <Item
          
          onClick={() => {}}
          arrow="horizontal"
        >
        <span style={{ width: '23px', height: '23px', display: 'inline-block', background: 'url('+require('../img/订单.png')+') center center /  23px 23px no-repeat'}}>  </span>
          我的订单
        </Item> 
        <Item
          
          onClick={() => {}}
          arrow="horizontal"
        >
        <span style={{ width: '23px', height: '23px', display: 'inline-block', background: 'url('+require('../img/定时关闭.png')+') center center /  23px 23px no-repeat'}}>  </span>
          定时关闭
        </Item>
        <Item
          
          onClick={() => {}}
          arrow="horizontal"
        >
        <span style={{ width: '23px', height: '23px', display: 'inline-block', background: 'url('+require('../img/闹钟.png')+') center center /  23px 23px no-repeat'}}>  </span>
          音乐闹钟
        </Item>
      </List>

      <List renderHeader={() => ''}>
        <Item
         
          arrow="horizontal"
          onClick={() => {}}
        >
        <span style={{ width: '23px', height: '23px', display: 'inline-block', background: 'url('+require('../img/试听.png')+') center center /  23px 23px no-repeat'}}>  </span>
        在线听歌免流量</Item>
        <Item
         
          onClick={() => {}}
          arrow="horizontal"
        >
        <span style={{ width: '23px', height: '23px', display: 'inline-block', background: 'url('+require('../img/优惠券.png')+') center center /  23px 23px no-repeat'}}>  </span>
          优惠券
        </Item>
      </List>

      <List renderHeader={() => ''}>
        <Item
          arrow="horizontal">
          <Button onClick={this.showShareActionSheet}>
          <span style={{ width: '23px', height: '23px', display: 'inline-block', padding:0,background: 'url('+require('../img/分享.png')+') center center /  23px 23px no-repeat'}}>  </span>                
          分享网易云音乐</Button>
        </Item>

        <Item
          onClick={() => {}}
          arrow="horizontal"
        >
         <Button onClick={this.showVersion.bind(this)}>
        <span style={{ width: '23px', height: '23px', display: 'inline-block', background: 'url('+require('../img/关于.png')+') center center /  23px 23px no-repeat'}}>  </span>
          关于</Button>
        </Item>
      </List>
            <Public_TAB pops={this.props}/>
    </div>
    )
  }
}


export default Account